<template>
  <div class="county-select">
    <ul>
      <li v-for="(county, index) in countyList" :key="index">
        <div>
          <p v-text="county.name" @click="countySelect(county)" />
          <!--<button v-if="!isLogin" type="primary" open-type="getPhoneNumber" @getphonenumber="getPhoneNumber(arguments, county)">{{ county.name }}</button>-->
        </div>
      </li>
    </ul>
    <CommentResultDialog v-if="submitResultObj" :result-title="submitResultObj.title" :result-detail="submitResultObj.detail" @close="submitResultObj = null" />
  </div>
</template>

<script>
  import { getStaffCounty } from '../../../api/index';
  import { getAppData } from '../../../utils/init';
  import { getUserPhone, getLoginInfo } from '../../../api/common';
  import { checkDepartmentComment } from '../../../api/department';
  import CommentResultDialog from '../../staff/CommentResultDialog';
  
  export default {
    name: 'CountySelect',
    components: {
      CommentResultDialog,
    },
    props: {},
    data() {
      const appData = getAppData();
      const { userInfo } = appData;
      return {
        countyList: [],
        countyInfo: null,
        isLogin: false,
        submitResultObj: null,
        userInfo,
      };
    },
    mounted() {
    },
    created() {
      this.init();
    },
    methods: {
      init() {
        this.getData();
        const appData = getAppData();
        this.isLogin = appData.isLogin;
      },
      async getData() {
        const res = await getStaffCounty({});
        if (res.code === 200 && res.data) {
          this.countyList = res.data.map((val) => {
            return { ...val, value: val.organId, name: val.organName };
          });
        }
      },
      async countySelect(county) {
        const { ableComment } = await this.getAbleComment(county);
        if (!ableComment) {
          return;
        }
        this.countyInfo = county;
        this.$pageTo({
          url: `/pages/department/index?organId=${county.organId}&organName=${county.organName}`,
        });
      },
      async getPhoneNumber([ e ], county) {
        console.log(e, county);
        const that = this;
        if (e.errMsg === 'getPhoneNumber:ok') {
          uni.getProvider({
            service: 'oauth',
            success(data) {
              uni.login({
                provider: data.provider,
                async success(data) {
                  const obj = await that.getLoginInfo(data);
                  if (obj.existmobile < 1) {
                    const res = await getUserPhone({ ...e, ...obj });
                    if (res.code === 200) {
                      that.isLogin = true;
                      getApp().globalData.userInfo.personId = res.data.personId;
                      getApp().globalData.userInfo.isLogin = true;
                      that.countySelect(county);
                    }
                    return;
                  }
                  that.isLogin = true;
                  getApp().globalData.userInfo.personId = obj.personId;
                  getApp().globalData.userInfo.isLogin = true;
                  that.countySelect(county);
                },
              });
            },
          });
        }
      },
      async getLoginInfo(data) {
        const param = {
          code: data.code,
        };
        let obj = {};
        const res = await getLoginInfo(param);
        if (res.code === 200) {
          obj = res.data;
        }
        return obj;
      },
      async getAbleComment(county) {
        let ableComment = false;
        const { userInfo } = this;
        const param = {
          districtToId: county.organId,
          personId: userInfo.personId,
        };
        const res = await checkDepartmentComment(param);
        if (res.code === 200 && res.data) {
          ableComment = res.data.isComment;
          if (!res.data.isComment && res.data.reason) {
            this.submitResultObj = {
              title: res.data.title,
              detail: res.data.reason,
            };
          }
        }
        return { ableComment };
      },
    },
  };
</script>

<style lang="scss" scoped>
  .county-select {
    margin-top: 15px;
    ul {
      margin: 0 -5px;
      font-size: 0;
      li {
        display: inline-block;
        padding: 5px;
        width: calc((1 / 3) * 100%);
        > div {
          border-radius: 5px;
          background-color: white;
          text-align: center;
          p, button {
            padding: 15px 0;
            font-size: 14px;
            line-height: 1;
            background-color: white;
            color: #4578B2;
            border-radius: 5px;
          }
        }
        &.active {
          > div {
            background-color: #0669f0;
            p {
              color: white;
            }
          }
        }
      }
    }
  }
</style>
